<template>
  <div class="scroll-container">
    <ElSegmented class="content" v-model="value" :options="fileList" @change="onChange">
      <template #default="{ item }">
        <div class="flex flex-col items-center gap-2 p-4">
          <ElIcon size="20"><Tickets /></ElIcon>
          <div>{{ item }}</div>
        </div>
      </template>
    </ElSegmented>
  </div>
  <ContentWrap>
    <div id="terminal-div">
      <ElText class="mx-1 mgr-10">顺序</ElText>
      <ElSelect
        v-model="sortValue"
        placeholder="请选择顺序"
        size="small"
        class="searchSelect"
        @change="onChange"
      >
        <ElOption
          v-for="item in sortOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </ElSelect>
      <ElText class="mx-1 mgr-10">行数</ElText>
      <ElSelect
        v-model="lineValue"
        placeholder="请选择行数"
        size="small"
        class="searchSelect"
        @change="onChange"
      >
        <ElOption
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </ElSelect>
      <CodemirrorConsole :code="msg" :dark="true" :disabled="true" id="terminal-console" />
    </div>
  </ContentWrap>
</template>
<script setup lang="tsx">
import { ContentWrap } from '@/components/ContentWrap'
import CodemirrorConsole from '../console/codemirrorConsole.vue'
import { getLogFileListApi, readLogLineApi } from '@/api/log'
import { ElSegmented, ElIcon, ElSelect, ElOption, ElText } from 'element-plus'
import { ref } from 'vue'
import { Tickets } from '@element-plus/icons-vue'
const msg = ref('123123')
const fileList = ref([])
const getFileList = async () => {
  const res = await getLogFileListApi()
  fileList.value = res.result
  value.value = res.result[0]
  onChange()
}
getFileList()
const lineValue = ref('100')
const value = ref('')
const sortValue = ref('1')
const options = [
  {
    value: '100',
    label: '100'
  },
  {
    value: '500',
    label: '500'
  },
  {
    value: '1000',
    label: '1000'
  },
  {
    value: '5000',
    label: '5000'
  }
]
const sortOptions = [
  {
    value: '1',
    label: '前'
  },
  {
    value: '2',
    label: '后'
  }
]
const onChange = async () => {
  const logRes = await readLogLineApi({
    fileName: value.value,
    line: lineValue.value,
    sort: sortValue.value
  })
  msg.value = logRes.result
}
</script>

<style scoped>
.scroll-container {
  width: 100%; /* 容器宽度 */
  overflow-x: auto; /* 横向滚动条自动出现 */
  white-space: nowrap; /* 确保内容不换行 */
}

.content {
  width: 2000px; /* 假设内容宽度很大 */
}
#terminal-console {
  height: 500px;
  line-height: 20px;
}
#terminal-div {
  width: 95%;
  margin: 0 auto;
}
.searchSelect {
  width: 100px;
  margin: 10px 10px 10px auto;
}
.mgr-10 {
  margin-right: 10px;
}
</style>
